<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]"
          placeholder="请输入名称"
        />
        <a-input hidden v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="height: 104px" label="图标">
        <UploadImg v-model="imageUrl" warehouse cropper />
      </a-form-item>
      <a-form-item label="所在地区" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input hidden v-decorator="['areaIds', { rules: [{ required: true, message: '请选择地区' }] }]"></a-input>
        <div class="city-box">
          <a-select placeholder="省" style="width: 30%" v-decorator="['provinceId']" @change="changeProvince">
            <a-select-option :value="item.id" v-for="(item, index) in provinceArr" :key="index"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
          <a-select placeholder="市" style="width: 30%; margin-left: 5%" v-decorator="['cityId']" @change="changeCity">
            <a-select-option :value="item.id" v-for="(item, index) in cityArr" :key="index"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
          <a-select placeholder="区" style="width: 30%; margin-left: 5%" v-decorator="['areaId']" @change="changeArea">
            <a-select-option :value="item.id" v-for="(item, index) in areaArr" :key="index"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
        </div>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经纬度">
        <span> 经度：{{ info.longitude }} 纬度：{{ info.latitude }} </span>
        <a-icon type="environment" @click="handleOpenMap" />
        <a-input hidden v-decorator="['longitude']"></a-input>
        <a-input hidden v-decorator="['latitude']"></a-input>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地址">
        <a-textarea :rows="5" v-decorator="['address']" />
      </a-form-item>
    </a-form>
    <map-dialog :infoData="info" ref="mapDialog" @ok="setLongLat" />
  </a-modal>
</template>
<script>
import { centerAdd, centerEdit } from '@/api/web/biz'
import pick from 'lodash.pick'
import { getDistList } from '@/api/system/system'
import mapDialog from '@/components/map'
import UploadImg from '@/components/UpFile/uploadImg';

export default {
  components: {
    mapDialog,
    UploadImg
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      isload: true,
      loading: false,
      imageUrl: '',
      isEdit: false,
      isMaster: false,
      title: '',
      type: '',
      provinceArr: [],
      cityArr: [],
      areaArr: [],
      info: {
        longitude: '',
        latitude: '',
      },
      titleOption: [
        { label: '书记', value: 2 },
        { label: '委员', value: 4 },
      ],
      form: this.$form.createForm(this),
    }
  },
  beforeCreate() {},
  created() {
    this.getAddressData('0', 'province')
  },
  methods: {
    add(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.info.longitude = undefined
      this.info.latitude = undefined
      this.visible = true
      this.form.resetFields()
    },
    edit(obj) {
      this.title = obj.title
      this.type = obj.type
      this.imageUrl = ''
      this.info.longitude = obj.data.longitude ? Number(obj.data.longitude) : undefined
      this.info.latitude = obj.data.latitude ? Number(obj.data.latitude) : undefined
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.imageUrl = obj.data.icon
        this.getAddressData(obj.data.provinceId, 'city')
        this.getAddressData(obj.data.cityId, 'area')
        this.form.setFieldsValue(pick(obj.data, 'id', 'name', 'address', 'provinceId', 'cityId', 'areaId', 'areaIds'))
      })
    },

    changeProvince(value) {
      this.form.setFields({ cityId: undefined, areaId: undefined })
      this.getAddressData(value, 'city')
    },

    changeCity(value) {
      this.form.setFields({ areaId: undefined })
      this.getAddressData(value, 'area')
    },

    changeArea(e) {
      this.form.setFieldsValue({
        areaIds: this.form.getFieldValue('provinceId') + ',' + this.form.getFieldValue('cityId') + ',' + e,
      })
    },

    getAddressData(value, type) {
      var params = {
        pid: value,
      }
      return getDistList(params).then((res) => {
        if (res.code === 0) {
          switch (type) {
            case 'province':
              this.provinceArr = JSON.parse(JSON.stringify(res.rows))
              break
            case 'city':
              this.cityArr = JSON.parse(JSON.stringify(res.rows))
              break
            case 'area':
              this.areaArr = JSON.parse(JSON.stringify(res.rows))
              break
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleOpenMap() {
      this.$refs.mapDialog.show()
    },
    setLongLat(val) {
      this.info.longitude = val.longitude
      this.info.latitude = val.latitude
      this.form.setFieldsValue({
        longitude: val.longitude,
        latitude: val.latitude,
        address: val.address,
      })
    },

    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = JSON.parse(JSON.stringify(values))
          params.icon = this.imageUrl
          params.branchId = this.$route.query.id
          params.type = 1
          this.confirmLoading = true
          if (this.type === 'add') {
            return centerAdd(params)
              .then((res) => {
                this.$message.success('新增成功')
                this.visible = false
                this.$emit('add')
              }).finally(() => {
                this.confirmLoading = false
              })
          } else {
            return centerEdit(params)
              .then((res) => {
                this.$message.success('编辑成功')
                this.visible = false
                this.$emit('upd')
              }).finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.avatar-uploader > .ant-upload img {
  width: 86px;
  height: 86px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
